<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>08_盒子模型-特点-不规则浮动</title>

        <style>
            #wrapper {
                width: 400px;
                height: 400px;
                border: 10px dashed red;
            }

            #item1 {
                float: left;
                width: 260px;
                height: 150px;
                background-color: green;
                border: 1px solid black;
            }

            #item2 {
                float: left;
                width: 100px;
                height: 50px;
                background-color: skyblue;
                border: 1px solid black;
            }
            /* 新起一行的元素的上边界，不能超过前一个浮动元素的下边界。 */

            #item3 {
                float: left;
                width: 150px;
                height: 50px;
                background-color: tomato;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="item1"></div>
            <div id="item2"></div>
            <div id="item3"></div>
        </div>
    </body>
</html>